<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <title>用户授角</title>
  {% include 'rbac/common/add-edit-header.html' %}
</head>
<body>

<form class="layui-form" id="user-role-form" lay-filter="user-role-form">
  <div style="padding: 20px">
    <!-- 通过后端传递的 roles_with_flags 数据动态生成复选框，并根据标记的 is_owned 字段渲染复选框的状态（选中、默认） -->
    <div class="layui-form-item">
      {% for role in roles %}
        <input
          type="checkbox"
          name="choose_roles[]"
          title="{{ role.name }}"
          value="{{ role.id }}"
          lay-skin="tag"
          {% if role.is_owned %}checked{% endif %}
          {% if role.disabled %}disabled{% endif %}
        >
      {% endfor %}
    </div>
    <div style="margin-top: 20px">
      <button type="submit" class="layui-btn layui-btn-sm" lay-submit lay-filter="user-role-form-btn">确认</button>
      <button type="reset" class="layui-btn layui-btn-sm" lay-on="userRoleReload">重置</button>
    </div>
  </div>
</form>

{% include 'rbac/common/add-edit-footer.html' %}
<script>
  let token = "{{ csrf_token }}";
  solve_csrf(token)

  layui.use(["form", "popup", 'util'], function () {
    let $ = layui.$;
    let popup = layui.popup;
    let util = layui.util;
    let form = layui.form;


    // 重置按钮事件 (本质就是刷新当前页面)
    util.event('lay-on', {
      userRoleReload: function () {
        window.location.reload()
      }
    });

    // 更新当前角色的所拥有的权限!!
    form.on("submit(user-role-form-btn)", function (data) {
      // console.log('原始数据:', data.field);  // {choose_roles[0]: '1', choose_roles[1]: '2', choose_roles[2]: '3'}
      // 处理 choose_roles 为数组
      let choose_roles = Object.keys(data.field)
        .filter(key => key.startsWith('choose_roles[')) // 筛选出带有 choose_roles 的键
        .map(key => data.field[key]); // 获取对应的值
      // console.log('处理后的数据:', choose_roles);  // ['1','2','3']

      let url = "/api/v1/user/role_update/"
      // 这里处理成了 '1,2,3'
      let d = {choose_roles: choose_roles.join(','), user_id: {{user_obj.id}}} // 授哪些角,给哪个用户授角
      let reload_table = ""  // 授角成功后没必要刷新表格
      addAndEditAjaxRequest(popup, url, d, reload_table)
      return false; // 阻止表单默认提交
    });
  });
</script>
</body>
</html>